<template>
    <div class="content-box">
        <!-- 搜索 -->
        <Search @Emitlist="Emitlist" />
        <!-- 数据列表-->
        <div style="margin: 20px 0;">
            <el-card shadow="always">
                <el-icon>
                    <Loading />
                </el-icon>
                <span style="margin-left: 10px">数据列表</span>
            </el-card>
        </div>
        <!-- 表格 -->
        <el-table ref="multipleTableRef" :data="list" style="width: 100%" border
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="编号" property="id" width="80" align="center" />
            <el-table-column property="orderSn" label="订单编号" width="180" align="center" />
            <el-table-column label="提交时间" show-overflow-tooltip width="180" align="center">
                <template #default="{ row }">
                    {{ Time(row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column property="memberUsername" label="用户账号" align="center" />
            <el-table-column property="totalAmount" label="订单金额" align="center" />
            <el-table-column label="支付方式" align="center">
                <template #default="scope">
                    {{ zhifu[scope.row.payType] }}
                </template>
            </el-table-column>
            <el-table-column label="订单来源" align="center">
                <template #default="scope">
                    {{ origins[scope.row.sourceType] }}
                </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center">
                <template #default="scope">
                    {{ changes[scope.row.status] }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <div class="btn">
                        <el-button>查看订单</el-button>
                        <el-button type="danger">删除订单</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 20px;">
            <div class="box">
                <div>
                    <!-- 筛选 -->
                    <el-select v-model="form.fenlei" clearable placeholder="批量操作">
                        <el-option v-for="(item, index) in form.fenleis" :key="index" :value="item"
                            @click="indexFn(index)" />
                    </el-select>
                    <el-button type="primary" @click="fenyeSaix">确定</el-button>
                </div>
                <div>
                    <el-pagination v-model:currentPage="paginate.currentPage" v-model:page-size="paginate.pageSize"
                        :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
                        :total="paginate.total" background @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
        <!-- 关闭订单弹出框 -->
        <el-dialog v-model="dialogVisible" title="关闭订单" width="30%">
            <span>
                <el-form-item label="操作备注">
                    <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="ordVisible">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script setup lang='ts'>
import Search from "./component/search.vue";
import { useTable } from '@/hook/table';
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from "vue";
import * as http from '@/request/api'
import dayjs from "dayjs";
const form = reactive({
    fenlei: '',
    fenleis: ["批量发货", "关闭订单", "删除订单"],
    note: ""
})
const changes = ["待付款", '待发货', "已发货", '已完成', "已关闭"];
const origins = ["PC订单", "APP订单"];
const zhifu = ['未支付', '支付宝', '微信']
const keyword = ref('')
let { list, paginate, handleSizeChange, handleCurrentChange } = useTable(http.admin.orderList, { receiverKeyword: keyword.value })

// 搜索子组件传来的list
const Emitlist = (val: any) => {
    list.value = val
}

//获取选中的数据
const Select = ref(0)
const idArr = ref<number[]>([])
function handleSelectionChange(val: AdminListResponelist[]) {
    Select.value = val.length
    val.forEach(item => {
        idArr.value.push(item.id)
    })
}
// 获取筛选数组的下标
const index = ref(0)
function indexFn(idx: number) {
    index.value = idx
}
// 筛选
const dialogVisible = ref(false)
function fenyeSaix() {
    if (Select.value) {
        if (index.value == 0) {
            ElMessage({
                message: '选中订单中没有可以发货的订单',
                duration: 1500,
                type: 'warning',
            })
        } else if (index.value == 1) {
            dialogVisible.value = true
        } else if (index.value == 2) {
            ElMessageBox.confirm(
                '是否要进行该删除操作?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                http.admin.orderDelete({ ids: idArr.value })
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            })
        }

    } else {
        ElMessage({
            message: '请选择要操作的订单',
            duration: 1500,
            type: 'warning',
        })
    }
}
// 关闭订单弹出框确定
function ordVisible() {
    if (form.note) {
        http.admin.orderClose({
            ids: idArr.value,
            note: form.note
        })
        dialogVisible.value = false,
            ElMessage({
                message: '修改成功',
                duration: 1500,
                type: 'success',
            })
    } else {
        ElMessage({
            message: '操作备注不能为空',
            duration: 1500,
            type: 'warning',
        })
    }
}
// 处理时间
function Time(time?: string) {
    if (!time) return "";
    return dayjs(time).format("YYYY-MM-DD HH-mm-ss");
}

</script>
    
<style scoped>
.box {
    display: flex;
    justify-content: space-between;
}

.el-select {
    margin-right: 20px
}

.btn {
    display: flex;
}

.content-box {
    padding: 10px 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}
</style>